<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>九宫格布局1,4,6,9分屏切换</title>
	</head>
	<style>
	
	</style>
	<body>
		
	</body>
	<script src="static/jQuery-v3.7.1.js"></script>
	<script>
		$(document).ready(function() {
			// 初始化展示4宫格
			createGridLayout(toggle6);
		})
		// 定义不同的布局数组
		var toggle1 = [1]; //单屏
		var toggle4 = [1, 2, 3, 4]; //4分屏
		var toggle6 = [1, 2, 3, 4, 5, 6]; //6分屏
		var toggle9 = [1, 2, 3, 4, 5, 6, 7, 8, 9]; //9分屏
		// 根据不同的按钮点击事件，应用不同的布局
		document.getElementById("toggle1").addEventListener("click", function() {
			createGridLayout(toggle1);
		});
		document.getElementById("toggle4").addEventListener("click", function() {
			createGridLayout(toggle4);
		});
		document.getElementById("toggle6").addEventListener("click", function() {
			createGridLayout(toggle6);
		});
		document.getElementById("toggle9").addEventListener("click", function() {
			createGridLayout(toggle9);
		});
		// 动态创建视频容器
		function createGridLayout(layout) {
			var container = document.getElementById("container");
			// 清空容器
			container.innerHTML = "";
			// 动态创建class
			container.className = "play" + layout.length;
			// 根据布局创建视频元素并添加到容器中
			for (var i = 0; i < layout.length; i++) {
				var video = createVideoElement(layout[i]);
				var number = layout.length;
				switch (number) {
					case 1:
						video.className = "grid-item1";
						break;
					case 4:
						video.className = "grid-item4";
						break;
					case 6:
						video.className = "grid-item6";
						break;
					case 9:
						video.className = "grid-item9";
						break;
					default:
						video.className = "grid-item4";
						break;
				}
				container.appendChild(video);
			}
		}
		// 动态创建video标签
		function createVideoElement(id) {
			var video = document.createElement("video");
			video.id = "video" + id;
			video.src = "http://www.w3school.com.cn/i/movie.mp4"
			return video;
		}
	</script>
</html>
